<template>
	<view style="padding-bottom: 10px;">
		<uniNavBar  :fixed="true" status-bar :backgroundColor="'rgba(255, 255, 255, '+alpha+')'">
			<block slot="left">
				<view  v-if="logoForm !== null" style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
					<view v-if="logoForm.status == 0">
						<image v-if="logoForm.logoUrl !== null || logoForm.logoUrl !== ''" style="width: 40px;height: 40px;border-radius: 25px;" :src="logoForm.logoUrl"></image>
					</view>
				</view>
			</block>
			<view class="input-view" @click="handSearch">
				<view style="width: 100%;padding: 0 10px 0 10px;color: #999999;display: flex;justify-content:center;align-items: center;">
					搜索商品
				</view>
				<uni-icons type="search" size="20"></uni-icons>
			</view>
<!-- 			<view class="input-view">
				<uni-search-bar style="width: 100%;" v-model="searchVal" :radius="15" placeholder="输入搜索关键词" bgColor="#F6F6F6" cancelButton="none"  @confirm="search" />
			</view> -->
		</uniNavBar>
		<!-- <scroll-view style="padding-bottom: 10px;" scroll-top="0" scroll-y="true" @scroll="handScroll" :style="{height: `${windowHeight-0}px`}">
		</scroll-view> -->
<!-- 		<view style="border: 2px solid red;">
			<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
		</view> -->
		<view v-if="this.bannerList.length > 0" style="height: 350px;">
			<!-- <uni-swiper-dot :info="bannerList" mode="round" :current="swiperDotIndex" :dots-styles="dotsStyle">
				<swiper @change="changeSwiper" :circular="true" :autoplay="true" :current="swiperDotIndex" style="height: 350px;">
					<swiper-item  v-for="(item, index) in bannerList" :key="index" >
						<view style="height: 100%;display: flex;flex-direction: column;">
							<image  style="width: 100%;height: 100%;" :src="item.bannerUrl"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot> -->
			<swiper :circular="true" :autoplay="true" :easing-function="easeInOutCubic" style="width: 100%;height: 100%;">
				<swiper-item  v-for="(item, index) in bannerList" :key="index" >
					<view style="height: 100%;display: flex;flex-direction: column;">
						<image  style="width: 100%;height: 100%;" :src="item.bannerUrl"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="this.bannerList.length == 0">
			<view style="height: 350px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #f6f6f6;">
<!-- 				<text style="color: #dacdbe;font-size: 18px;">
					暂无图片。
				</text>
				<text style="color: #dacdbe;font-size: 18px;">
					请在管理后台上传。
				</text> -->
			</view>
		</view>
		
		<view style="position: relative;top: -30px;display: flex;flex-direction: column;">
			<view style="display: flex;flex-direction: column;padding: 0 10px 0 10px;">
				<view style="height: 110px;border-radius: 15px;display: flex;flex-direction: column;align-items: center;padding: 5px;background: linear-gradient(to top, #fff, #d4e4ff);box-shadow: 0 3px 20px rgb(210,220,235,0.9);">
					
					<!-- background: linear-gradient(to right,#c2b292,#dacdbe); -->
					<!-- background: linear-gradient(to right,#4F383E,#2F2434); -->
					<view v-if="this.kindList.length > 0" style="width: 100%;height: 100%;display: flex;flex-direction: column;padding: 5px;">
						<scroll-view style="width: 100%;height: 100%;white-space: nowrap;display: inline-block;" scroll-x="true">
							<view @click="handKind(item)" v-for="item,index in kindList" :key="index" style="display: inline-block;width: 80px;height: 100%;margin-left: 5px;">
								<view style="display: flex;flex-direction: column;width: 100%;height: 100%;">
									<view class="kindMenuBj" style="height: 100%;margin-bottom: 5px;display: flex;justify-content: center;align-items: center;">
										<image v-if="item.goodsUrl !== null && item.goodsUrl !== ''" style="width: 40px;height: 40px;border-radius: 5px;" :src="item.goodsUrl"></image>
										<image v-else style="width: 40px;height: 40px;border-radius: 5px;" src="../static/images/noPics.png"></image>
									</view>
									<!-- <view style="font-size: 14px;color: #161616;display: flex;align-items: center;justify-content: center;width: 80px;overflow: hidden;padding: 0 5px 0 5px;">
										{{item.goodsName}}
									</view> -->
									<view style="width: 80px;padding: 0 5px 0 5px;display: flex;flex-direction: row;justify-content: center;">
										<text :decode="true" style="color: #161616;font-size: 14px;
															overflow: hidden;
															word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{item.goodsName}}
										</text>
									</view>
									
								</view>
							</view>
						</scroll-view>
					</view>
<!-- 					<view style="border: 0px solid white;width: 95px;height: 100%;">
						<image style="width: 100%;height: 100%;" src="../static/images/classify333.png"></image>
					</view> -->
				</view>
			</view>
		</view>
		
		<!-- position: relative;top: -20px; -->
		<view style="margin-bottom: 10px;font-weight: 500;font-size: 16px;color: #020202;padding-left: 10px;display: flex;flex-direction: row;align-items: center;">
			<image src="../static/images/remen1.png" style="width: 25px;height: 25px;margin-right: 5px;"></image>
			热门推荐
		</view>
		
		<view v-if="goodsList.length > 0" style="border: 0px solid red;">
			<uni-row>
<!-- 				<uni-col :span="12">
					<view style="padding: 10px;display: flex;flex-direction: column;">
						<view style="border: 0px solid black;">
							<view style="margin-bottom: 10px;height: 190px;">
								<image src="../static/images/banner/banner03.jpg" style="height: 100%;border-radius: 10px;"></image>
							</view>
							<view style="margin-bottom: 10px;">
								<text :decode="true" style="color: #666666;font-size: 14px;margin-left: 8px;line-height: 20px;">
									【UPF100+】波司登2024新款原纱透气凉感宽松连帽外套长宽松全包裹防晒连帽防晒衣
								</text>
							</view>
							<view style="display: flex;flex-direction: row;">
								原价
								<text style="color: #BCA656;font-size: 16px;font-weight: 600;">
									¥666
								</text>
								划线价
								<view style="margin-left: 5px;text-decoration: line-through;font-size: 12px;color: #898c9a;display: flex;align-items: flex-end;">
									<text>
										¥299
									</text>
								</view>
							</view>
						</view>
					</view>
				</uni-col> -->
				
				<uni-col v-for="(item,index) in goodsList" :key="index" :span="12" style="">
					<view @click="handShowGoodsInfo(item)" style="padding: 10px;display: flex;flex-direction: column;">
						<view style="border: 0px solid black;">
							<view style="margin-bottom: 10px;height: 190px;">
								<!-- <image src="../static/images/banner/banner03.jpg" style="height: 100%;border-radius: 10px;"></image> -->
								<image :src="item.mallGoodsBannerList[0].bannerPic" style="height: 100%;border-radius: 10px;"></image>
							</view>
							<view style="margin-bottom: 10px;">
								<text :decode="true" style="color: #666666;font-size: 14px;margin-left: 8px;line-height: 20px;">
									{{item.goodsName}}
								</text>
							</view>
							<view style="display: flex;flex-direction: row;">
								<!-- 折扣价 -->
								<text style="color: #BCA656;font-size: 16px;font-weight: 600;">
									¥{{item.mallGoodsSkuList[0].discountPrice}}
								</text>
								<!-- 原价价 -->
								<view style="margin-left: 5px;text-decoration: line-through;font-size: 12px;color: #898c9a;display: flex;align-items: flex-end;">
									<text>
										¥{{item.mallGoodsSkuList[0].orginPrice}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		
	</view>
</template>

<script>
	
   import uniNavBar from '../components/uni-nav-barHome/components/uni-nav-bar/uni-nav-bar.vue'
   import carousel from '@/components/vear-carousel/vear-carousel'
  import { handleTree } from '../utils/common.js'
	
  export default {
	  onShow() {
	  	console.log('__onShow_')
		this.initBannerData();
		this.initGoodsKind();
		this.initLogo();
		this.initGoodasData();
	  },
	  onShareAppMessage() {
		return {
		  title: '分享当前小程序',
		  path: '/pages/index'
		}
	  },
	  created() {
	  	//this.envID = this.globalConfig.envID;
	  	//this.serviceID = this.globalConfig.serviceID;
	  	//console.log(this.envID,'____',this.serviceID)
	  },
	  data(){
		return{
		  globalConfig: getApp().globalData.config.appInfo,
		  txCloudEnvID:getApp().globalData.config.appInfo.txCloudEnvID,
		  vxService:getApp().globalData.config.appInfo.vxService,
		  alpha:0,
		  swiperDotIndex:0,
		  bannerList: [],
		  goodsList: [],
		  kindList:[],
		  logoForm:null,//企业logo
		  searchVal:'',
		  dotsStyle:{
			width:15,
			backgroundColor: 'rgba(0, 0, 0, .3)',
			border: '1px rgba(0, 0, 0, .3) solid',
			color: '#fff',
			selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
			selectedBorder: '1px rgba(0, 0, 0, .9) solid'
		  },
		  imgList: [{
					id: 1,
					url: 'https://mail-activity.nosdn.127.net/54d46d33-810a-4f3d-9e14-a8671608feeb'
				},{
					id: 2,
					url: 'https://env-00jxh1npxfng.normal.cloudstatic.cn/login-background (2).jpg?expire_at=1722196582&er_sign=1d900f1442c414bdc30cd1cd6c02f169'
				},{
					id: 3,
					url: 'https://env-00jxh1npxfng.normal.cloudstatic.cn/login-background.jpg?expire_at=1722196670&er_sign=6078c53711a73333db574960e8a4ffc8'
				},{
					id: 4,
					url: 'https://env-00jxh1npxfng.normal.cloudstatic.cn/a_看图王.jpg?expire_at=1722196790&er_sign=966e07cbdcbe78c798cf670ea458f87a'
		  }],
			
		}
	  },
	  onPageScroll : function(e) {
	  		let scrollTop = e.scrollTop;
	  		if (scrollTop <= 100){
				this.alpha = scrollTop / 100
			}else{
				this.alpha = 1;
			}
	  },
	  components:{
		  uniNavBar
	  },
	  computed:{
	  	  windowHeight() {
	  		return uni.getSystemInfoSync().windowHeight - 0
	  	  }
	  },
	  methods:{
		  selectedBanner(item, index) {
			console.log('————轮播——', item, index)
		  },
		  initBannerData(){
			wx.cloud.callContainer({
			  "config": {
			    "env": this.txCloudEnvID
			  },
			  "path": "/system/wxbanner/list",
			  "header": {
			    "X-WX-SERVICE": this.vxService,
			    "content-type": "application/json"
			  },
			  "method": "GET",
			  "data": ""
			}).then((res) =>{
				this.swiperDotIndex = 0;
				this.bannerList = [];
				this.bannerList = res.data.data;
				console.log(this.bannerList,'__this.bannerList_',this.bannerList.length);
				
			}).catch((e) =>{
				console.log(e.message);
				if(e.message.indexOf('102002') !== -1){
					this.$modal.showToast('请求超时')
				}else if(e.message.indexOf('-606003') !== -1){
					this.$modal.showToast('账号欠费')
				}else{
					this.$modal.showToast(e.message)
				}
			})
			  
		  },
		  initGoodsKind(){
		  	wx.cloud.callContainer({
		  	  "config": {
		  	    "env": this.txCloudEnvID
		  	  },
		  	  "path": "/system/kind/list",
		  	  "header": {
		  	    "X-WX-SERVICE": this.vxService,
		  	    "content-type": "application/json"
		  	  },
		  	  "method": "GET",
		  	  "data": ""
		  	}).then((res) =>{
		  		//console.log(res)//status: 400
		  		if(res.data.code == 200){
		  			// console.log(res.data.data)
		  			let kindOneListFilter = [];
		  			this.kindList = [];
		  			res.data.data.forEach((item) =>{
		  				if(item.status == '0' && item.parentId == 0){
		  				  kindOneListFilter.push(item);
		  				}
		  			});
		  			 let kindTwoListFilter = [];
		  			kindOneListFilter.forEach((items)=>{
		  			  kindTwoListFilter.push(items);
		  			  res.data.data.forEach((item) =>{
		  				if(item.parentId === items.goodsId && item.status === '0'){
		  				  kindTwoListFilter.push(item);
		  				}
		  			  });
		  			})
		  			this.kindList = handleTree(kindTwoListFilter, "goodsId");
		  			console.log(this.kindList)
		  			
		  		}
		  	}).catch((e) =>{
		  		console.log(e.message);
		  		if(e.message.indexOf('102002') !== -1){
		  			this.$modal.showToast('请求超时')
		  		}else if(e.message.indexOf('-606003') !== -1){
		  			this.$modal.showToast('账号欠费，登录失败，请联系管理员')
		  		}else{
		  			this.$modal.showToast('系统异常，请联系管理员')
		  		}
		  	})
		  },
		  initLogo(){//企业Logo
			  let _this = this;
			  wx.cloud.callContainer({
			    "config": {
			      "env": this.txCloudEnvID
			    },
			    "path": "/system/wxLogo/list",
			    "header": {
			      "X-WX-SERVICE": this.vxService,
			      "content-type": "application/json"
			    },
			    "method": "GET",
			    "data": ""
			  }).then((res) =>{
				if(res.data.code == 200){
					//console.log(res.data.data);
					if(res.data.data.length > 0){
						_this.logoForm = null;
						_this.logoForm = res.data.data[0];
						console.log(_this.logoForm);
					}
				}
			  }).catch((e) =>{
		  		console.log(e.message);
		  		if(e.message.indexOf('102002') !== -1){
		  			this.$modal.showToast('请求超时')
		  		}else if(e.message.indexOf('-606003') !== -1){
		  			this.$modal.showToast('账号欠费，登录失败，请联系管理员')
		  		}else{
		  			this.$modal.showToast('系统异常，请联系管理员')
		  		}
		  	 })
		  },
		  initGoodasData(){
			  let _this = this;
			  wx.cloud.callContainer({
			    "config": {
			      "env": _this.txCloudEnvID
			    },
			    "path": "/system/goods/lists",
			    "header": {
			      "X-WX-SERVICE": _this.vxService,
			      "content-type": "application/json"
			    },
			    "method": "GET",
			    "data": ""
			  }).then((res) =>{
				  console.log(res);
				if(res.data.code == 200){
					_this.goodsList = [];
					if(res.data.data.length > 0){
						console.log('__________以下商品列表______');
						console.log(res.data.data);
						_this.goodsList = res.data.data;
					}
				}
			  }).catch((e) =>{
		  		console.log(e.message);
		  		if(e.message.indexOf('102002') !== -1){
		  			this.$modal.showToast('请求超时')
		  		}else if(e.message.indexOf('-606003') !== -1){
		  			this.$modal.showToast('账号欠费，登录失败，请联系管理员')
		  		}else{
		  			this.$modal.showToast('系统异常，请联系管理员')
		  		}
		  	 })
		  },
		  changeSwiper(e){
			  this.swiperDotIndex = e.detail.current
		  },
		  handSearch(){
			  this.$tab.navigateTo('/pages/goodsfind/index');
		  },
		  handKind(e){
			  // console.log(e.goodsId,'___',e.goodsName,'___',e.children)
			  this.$tab.reLaunch("/pages/classify/index?goodsId="+e.goodsId);
		  },
		  handShowGoodsInfo(item){
			  console.log(item,'____',item.goodsName)
			  getApp().globalData.config.appInfo.goodsInfo='';
			  getApp().globalData.config.appInfo.goodsInfo = encodeURIComponent(JSON.stringify(item));
			  this.$tab.navigateTo("/pages/goodsdetail/index");
			  
			  
		  }
			
			
	  }
  }
</script>

<style lang="scss" scoped>
	$nav-height: 30px;
	
	page{
		background-color: #F6F6F6;
	}
	
	.kindMenuBj{
		background: url('');
		background-size: 100% 100%;
	}
	
  
  	.input-view {
  		/* #ifndef APP-PLUS-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: row;
		justify-content: flex-end;
  		// width: 500rpx;
  		flex: 1;
  		background-color: #F6F6F6;
  		height: $nav-height;
		// height: 35px;
  		border-radius: 15px;
  		padding: 0 15px;
  		flex-wrap: nowrap;
  		margin: 7px 0;
		// margin-top: 5px;
		align-items: center;
		// border: 1px solid red;
  	}
	
		.nav-bar-input {
			width: 100%;
			// height: $nav-height;
			// line-height: $nav-height;
			height: 100%;
			
			/* #ifdef APP-PLUS-NVUE */
			// width: 300rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #F6F6F6;
			
		}
		
		
			.swiper-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				color: #fff;
			}
		
			.swiper-item0 {
				background-color: #cee1fd;
			}
		
			.swiper-item1 {
				background-color: #b2cef7;
			}
		
			.swiper-item2 {
				background-color: #cee1fd;
			}
			.swiper-item3 {
				background-color: #cee1fd;
			}
		
		

</style>
